<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/boot.js"></script>
</head>

<body>
    <div class="layui-fluid">
        <div class="flexrow">
            <div class="layui-panel list-container">
                <div class="list-search-container">
                    <button class="layui-btn layui-btn-sm" onclick="HandleAdd()"><i
                            class="layui-icon layui-icon-add-1 layui-font-12"></i>新增项</button>
                    <button class="layui-btn layui-btn-sm" style="margin-left:5px" onclick="HandleSave()"><i
                            class="layui-icon layui-icon-ok layui-font-12"></i>保存修改</button>
                </div>
                <table class="layui-table" lay-data="{id: 'datagrid',height:450,limit:100}" lay-filter="datagrid">
                    <thead>
                        <tr>
                            <th lay-data="{field:'item_text',edit:'text'}">文字</th>
                            <th lay-data="{field:'item_value',edit:'text'}">值</th>
                            <th lay-data="{field:'sort_num',width:80,align:'center',edit:'text'}">排序</th>
                            <th lay-data="{fixed: 'right', width:100, align:'center', toolbar: '#op'}">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</body>
<script type="text/html" id="op">
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="HandleDelete"><i
            class="layui-icon layui-icon-delete layui-font-12"></i>删除</button>
</script>
<script>
    var TableData;
    $(function () {
        BindTableData();
    })

    function BindTableData() {
        var param = {
            code_id: GetUrlParam("code_id"),
        }
        BindTable("datagrid", "system/setting/codeitem/getItemList", param, function (res) {
            TableData = res.data;
            BindTableCellEdit('datagrid',function(UpdateTableData){
                TableData = UpdateTableData;
            })
        }, false)
    }

    function HandleAdd() {
        TableData.push({
            code_id: GetUrlParam("code_id"),
            item_text: "",
            item_value: "",
            sort_num: 0
        })
        RefreshTable('datagrid',TableData)
    }

    function HandleSave() {
        var param = {
            code_id: GetUrlParam("code_id"),
            entityList: JSON.stringify(TableData)
        }
        HttpPost(JSON.stringify(param), "system/setting/codeitem/updateItemList", function (result, status) {
            if (result.code == 0) {
                OpenSuccessMessage("保存成功");
                BindTableData();
            } else {
                OpenFail(result.msg)
            }
        })
    }

    function HandleDelete(RowData) {
        for (var i = 0; i < TableData.length; i++) {
            var element = TableData[i];
            if (element.row_id == RowData.row_id) {
                TableData.splice(i, 1);
                break;
            }
        }
        RefreshTable('datagrid',TableData)
    }
</script>

</html>